import React,{useState,useEffect} from 'react'
import ReactECharts from 'echarts-for-react'
import Service from '../../../../../service'



export default function Index() {

  useEffect(()=>{
    getOrderAllByDepart()
    getContractMonthByDepart()
    getContractWeekByDepart()
  },[])

  // 总记录请求的缓存数据
  const [requestOrderAllDataDe,setRequestDataDepart] = useState([])
  const [requestOrderMonthData,setOrderMonthData] = useState([])   // 30天数据请求
  const [requestOrderWeekData,setOrderWeekData] = useState([])   // 7天数据请求
  // 跟单统计总记录
  const getOrderAllByDepart = async ()=>{
    let result = await Service.dataAnalysis.allOrderByDepart()
    setRequestDataDepart(result.data)
  }

  // x轴和y轴数据
  const [xarr,setXarr] = useState([])  // x轴数据
  const [yarrDepartAll,setYarrDepartAllDepart] = useState([])  // y轴总记录数据
  const [yarrDepartMonth,setYarrDepartMonth] = useState([])  // y轴总记录数据
  const [yarrDepartWeek,setYarrDepartWeek] = useState([])  // y轴总记录数据
  
   // 获取x轴和总记录的y轴
   useEffect(()=>{
    let temarr = []
    let allData = []
    requestOrderAllDataDe.map(item=>{
      temarr.push(item.dept_title)
      allData.push(JSON.stringify(item).match(/\d+/)[0])
    })
    setXarr(temarr);
    setYarrDepartAllDepart(allData);
  },[requestOrderAllDataDe])

   // 跟单统计30天部门总记录
   const getContractMonthByDepart = async ()=>{
    let result = await Service.dataAnalysis.monthOrderByDepart()
    setOrderMonthData(result.data)
    console.log(result.data);
  }
  useEffect(()=>{
    let allData = []
    requestOrderMonthData.map(item=>{
      allData.push(JSON.stringify(item).match(/\d+/)[0])
    })
    setYarrDepartMonth(allData);
  },[requestOrderMonthData])

   // 跟单统计7天部门总记录
   const getContractWeekByDepart = async ()=>{
    let result = await Service.dataAnalysis.weekOrderByDepart()
    
    setOrderWeekData(result.data)
  }
  useEffect(()=>{
    let allData = []
    requestOrderWeekData.map(item=>{
      allData.push(JSON.stringify(item).match(/\d+/)[0])
    })
    setYarrDepartWeek(allData);
  },[requestOrderWeekData])


  let option = {
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['7天记录', '30天记录', '全部记录']
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    toolbox: {
      feature: {
        saveAsImage: {}
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: true,
      data: xarr
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '7天记录',
        type: 'line',
        stack: 'Total',
        data: yarrDepartWeek
      },
      {
        name: '30天记录',
        type: 'line',
        stack: 'Total',
        data: yarrDepartMonth
      },
      {
        name: '全部记录',
        type: 'line',
        stack: 'Total',
        data: yarrDepartAll
      }
    ]
  };
  return (
    <div>
      <div className='staffTitle' style={{
        backgroundColor:"#eff0ef",
        color:"black",
        fontWeight:700,
        height:"33px",
        lineHeight:"33px",
        paddingLeft:"5px"
        }}>按部门统计</div>
      <ReactECharts option={option} style={{width:"auto",height:"550px"}}/>
    </div>
  )
}
